<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <title>刮刮卡兑换</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}" />
</head>
<body>
<div>
    <form class="layui-form" action="" style="margin:4% 20%;">
        <div class="layui-form-item">
            <label class="layui-form-label">刮刮卡序号:</label>
            <div class="layui-input-block">
                <input type="text" name="scard" lay-verify="scard" placeholder="请输入卡号" autocomplete="off" class="layui-input"
                       style="display: inline-block;width:70%">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">刮刮卡密码:</label>
            <div class="layui-input-block">
                <input type="text" name="spwd" lay-verify="spwd" placeholder="请输入卡密码" autocomplete="off" class="layui-input"
                       style="display: inline-block;width:70%">
            </div>
        </div>
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="lookup">查找</button>
    </form>
    <table id="ggCard" lay-filter="ggCard"></table>
</div>
<script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script>
    layui.use(['form','table','jquery'],function(){
        var form=layui.form,
            layer=layui.layer,
            table=layui.table,
            $=layui.jquery;
        //自定义验证规则
        form.verify({
            scard: function(value) {
                //去除字符串中的所有空格
                var str = value.replace(/\s*/g, "");
                if (str.length == 0) {
                    return '请输入卡号';
                }
            },
            spwd:function(value){
                //去除字符串中的所有空格
                var str = value.replace(/\s*/g, "");
                if (str.length == 0) {
                    return '请输入卡密码';
                }
            }
        });
        form.on('submit(lookup)', function(data){
            //alert(data.field.cardNumber) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                type: 'GET', //提交方式
                url: '/exchange', //地址
                data: {
                    scard: data.field.scard,
                    spwd:data.field.spwd
                }, //传输的数据
                dataType: 'json', //传输的数据类型
                success: function(data){
                    if(data.code=='0'){
                        //第一个实例
                        table.render({
                            elem: '#ggCard'
                            ,height: 312
                            ,url: '/demo/table/user/' //数据接口
                            ,page: true //开启分页
                            ,cols: [
                                [ //表头
                                {field: 'sid', title: 'ID', width:80, sort: true, fixed: 'left'}
                                ,{field: 'scard', title: '卡号', width:80}
                                ,{field: 'spwd', title: '性别', width:80, sort: true}
                                ,{field: 'rid', title: '城市', width:80,
                                templet:'<div>{{d.rid.rname}}</div>'}
                                ,{field: 'state', title: '状态', width:80, sort: true,
                                templet:function(d){
                                    if(d.state=='0'){
                                        '<div>未领</div>'
                                    }else{
                                        '<div>已领</div>'
                                    }
                                }}
                            ]
                            ]
                        });
                    }else{
                        layer.msg('状态码不为200');
                    }
                },
                error:function(){
                    layer.msg('出现错误，请重试!');
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        $('#layerDemo .layui-btn').on('click', function() {
            var othis = $(this),
                method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        //双击监听事件
        table.on('rowDouble(PhoneNumber)', function(obj){
            //行数据在obj.data中
            var data=obj.data;
            //先判断状态是否已经被领取,如果领取过了就不在让它领取
            if(data.state=='未兑'){
                //示范一个公告层
                layer.open({
                    type: 1,
                    title: "奖品" //不显示标题栏
                    ,
                    closeBtn: false,
                    area: '500px;',
                    shade: 0.8,
                    id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    btnAlign: 'c',
                    moveType: 1 //拖拽模式，0或者1
                    ,
                    content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><button type="submit" class="layui-btn" lay-submit="" lay-filter="receive">立即提交</button><a class="layui-layer-close layui-layer-closetrue layui-btn">不领取</a></div>',
                    success: function(layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: 'http://www.layui.com/',
                            target: '_blank'
                        });
                    }
                });
            }
        });
        //点击领取
        form.on('submit(receive)',function(data){

        })
    })
</script>
</body>
</html>
